<template>
  <div class="rights">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <template>
        <el-table :data="RightsList" style="width: 100%">
          <el-table-column label="#" type="index"> </el-table-column>
          <el-table-column label="权限名称" prop="authName"> </el-table-column>
          <el-table-column label="路径" prop="path"> </el-table-column>
          <el-table-column label="权限等级">
            <template slot-scope="scope">
              <div>
                <el-tag :type="typeobj[scope.row.level]">{{
                  scope.row.level | rank
                }}</el-tag>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "rights",
  data() {
    return {
      //要显示的等级
      typeobj: {
        0: "primary",
        1: "success",
        2: "warning",
      },
      //权限列表
      RightsList: [],
    };
  },
  computed: {},
  methods: {
    //权限列表数据
    async getRights() {
      const res = await this.$http.getRightsApi();
      console.log(res, "权限列表");
      this.RightsList = res;
    },
  },
  mounted() {},
  created() {
    this.getRights();
  },
};
</script>
<style scoped lang="scss"></style>
